import React, { Component, Fragment } from 'react';
import { connect } from 'dva'
import { Chart, Interval, Tooltip } from 'bizcharts';
import relationshipList from '../../constant/relationshipList';
import * as echarts from 'echarts';

class technologyClusteringGraph extends Component {
  constructor(props) {
    super(props)
    this.state = {
      option: {
        tooltip: {
        },
        legend: [{
          data: relationshipList.categories.map(function (a) {
            return a.name;
          })
        }
        ],
        series: [
          {
            name: '技术聚类分析图',
            type: 'graph',
            layout: 'force',
            data: this.props.technologyClusteringList.nodes.map(function (item) {
              let obj = JSON.parse(JSON.stringify(item));
              obj.symbolSize = item.value < 10 ? item.value + 5 : (item.value / 10) * 1.5 + 15
              return obj;
            }),
            links: this.props.technologyClusteringList.links,
            categories: relationshipList.categories,
            roam: true,
            draggable: true,
            label: {
              position: 'right',
            },
            force: {
              repulsion: 30,
            },
            scaleLimit: {
              min: 0.3,
              max: 2
            },
            lineStyle: {
              lineStyle: {
                width: 12
              }

            }
          }
        ]
      }
    }

  }


  componentDidMount() {
    var chartDom = document.getElementById('relationshipGrap');
    var myChart = echarts.init(chartDom);
    myChart.setOption(this.state.option);
    let categories = relationshipList.nodes.map(function (a) {
      return a.category
    })
    let categoriesSet = new Set(categories)
    let categoriesArr = Array.from(categoriesSet).sort(function (a, b) { return a - b })

  }


  render() {
    return (
      <div>

        <div id="relationshipGrap" style={{ width: 900, height: 550 }}>
        </div>
      </div>

    )
  }
}

const mapStateToProps = state => {
  let technologyClusteringList = state.patentData.technologyClusteringList
  return {
    technologyClusteringList
  }
}

export default connect(mapStateToProps)(technologyClusteringGraph)